<html>
  <head>
    <script type="text/javascript" src="/static/jquery-1.5.2/jquery-1.5.2.min.js"></script>
    <script type="text/javascript" src="/static/flot-0.7/js/jquery.flot.js"></script>
    <script type="text/javascript" src="/static/flot-0.7/js/jquery.flot.stack.min.js"></script>
    <script type="text/javascript" src="/static/flot-0.7/js/jquery.flot.navigate.min.js"></script>
    <script type="text/javascript" src="/static/flot-0.7/js/jquery.flot.selection.min.js"></script>
    <script type="text/javascript" src="/static/flot-0.7/js/jquery.flot.crosshair.min.js"></script>
    <script type="text/javascript" src="/static/flot-0.7/js/date.js"></script>

    <title>Stratification plot</title>

    <script>
$(document).ready(function(){
      main();
});

    function main(){
      var start = new Date("Friday December 8, 2011 12:05:00");
      var end = start;
      var chartData = [];
      start = start.getTime();
      end.setMinutes(end.getMinutes() + 5);
      end = end.getTime();
      
      var trees = [];
      $('#tree').children().each(function(){
        var child = $(this); 
        if (child.is(":checked"))
          trees.push(child.val());
      });
    
      trees.forEach(function(element){
        var query = 'select distinct uuid ' +
                'where Metadata/Location/Building = "New York Times" ' + 
                'and Metadata/Extra/PmpCategory = "IEQ Thermal Comfort" ' +
                'and Metadata/Extra/DeviceName = "' + element + '"';

        $.ajax({
          type: 'POST',
          url: "/backend/api/query",
          data: query,
          success: function(resp){
            var uuids = eval(resp);          
            chartData.push(loadPoints(uuids, start, end));
          },
          async: false
        });
      });
      $.plot($("#chartarea"), chartData,
      {
        lines : { show: true },
        points : { show: true }
      });
    } 
   
    function loadPoints(streamids,start,end) {
      var chartData = [], height, d;
      streamids.forEach(function(element){
        var query = "/backend/api/data/uuid/" + element +
          "?starttime=" + escape(start) +
          "&endtime=" + escape(end);
        var opts = {
                url: query,
                success : function(resp){
                  var result = eval(resp)[0];
                  d = result.Readings[0][1];
                },
                async: false
        }       
        $.ajax(opts); 
        query = "/backend/api/tags/uuid/" + element;
        opts.url = query;
        opts.success = function(resp){
          var result = eval(resp)[0];
          height = result.Metadata.Extra.SensorLocation;
          height = parseFloat(height.substring(0,height.length - 1));
        }
        $.ajax(opts);
        chartData.push([d, height]);
      });
      chartData = chartData.sort(function(a,b){
        if (a[1] < b[1]) return -1;
        if (a[1] > b[1]) return 1;
        return 0;
      });
      return chartData;
    }
     
    </script>
  </head>
  
  <body>
    <div id='chartarea' style='width:400;height:400;'>
    </div>
    
    <form id='tree'>
    <input checked='checked' type='checkbox' value='TreeEastInt'>TreeEastInt</input><br />
    <input type='checkbox' value='TreeEastPer'>TreeEastPer</input><br />
    <input type='checkbox' value='TreeWestInt'>TreeWestInt</input><br />
    <input type='checkbox' value='TreeWestPer'>TreeWestPer</input><br />
    <input type='checkbox' value='TreeNorthInt'>TreeNorthInt</input><br />
    <input type='checkbox' value='TreeNorthPer'>TreeNorthPer</input><br />
    <input type='checkbox' value='TreeSouthInt'>TreeSouthInt</input><br />
    <input type='checkbox' value='TreeSouthPer'>TreeSouthPer</input><br />
    </form>
   <button onclick='main();'>Render</button>

  </body>
</html>
